// src/components/CustomLinkExample.js

// 导入 React 核心库
import React from 'react';
// 导入 Router 核心库
import {
  BrowserRouter as Router,
  Route,
  Link,
} from 'react-router-dom';

// 做自定义链接.
const CustomLinkExample = () => (
  <div>
    {/* 利用 Route 的 children 做自定义链接  */}
    <OldSchoolMenuLink to="/" label="Home" activeOnlyWhenExact />
    <OldSchoolMenuLink to="/about" label="About" />

    <hr/>

    <Route exact path="/" render={() => (<h2>Home</h2>)} />
    <Route path="/about" render={() => (<h2>About</h2>)} />
  </div>
);

// 自定义链接.
// 传入标签上的属性，也可以使用 ...rest 方式
const OldSchoolMenuLink = ({ to, label, activeOnlyWhenExact }) => {
  // 匹配渲染.
  const ChildrenComponent = ({ match }) => (
    <div className={match ? 'active' : ''}>
      <Link to={to}>{match ? '> ' : ''} {label}</Link>
    </div>
  );

  return <Route
    path={to}
    exact={activeOnlyWhenExact}
    children={ChildrenComponent}
  />
};

export default CustomLinkExample;
